/*
 * @Description: 我的预约item
 * @Author: ziwei.ma
 * @Date: 2019-07-15 17:58:12
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-20 17:06:59
 */

<template>
  <div
    class="reservation-item-warpper flex-v"
    @click="goToFormDetail(myReservationObj.orderNo)"
  >
    <div class="status-bar flex-h flex-vc flex-hsb">
      <div>包车</div>
      <span
        class="fontsize32"
        :style="'color:'+ orderStateColor"
      >{{myReservationObj.stateDesc}}</span>
    </div>
    <div class="dividing-line"></div>
    <div class="public-style fontsize32 flex-h flex-vc">
      <div>出发地点</div>
      <span>{{myReservationObj.tripAddress}}</span>
    </div>
    <div class="public-style fontsize32 flex-h flex-vc">
      <div>出发时间</div>
      <span>{{myReservationObj.tripStartTime | timeConversion}}</span>
    </div>
    <div class="public-style fontsize32 flex-h flex-vc">
      <div>结束时间</div>
      <span>{{myReservationObj.tripEndTime | timeConversion}}</span>
    </div>
  </div>
</template>

<script>
import { dateFtt } from 'vue-xiaobu-utils'
const PENDING_SUBMISSION = 0 // 待提交
const SUBMITTED = 1 // 已提交
const SUCCESSFUL_APPOINTMENT = 2 // 预约成功
const CANCEL = -1 // 取消
const ACCEPTED = -2 // 已受理
export default {
  props: {
    myReservationObj: ''
  },
  data() {
    return {
    }
  },
  computed: {
    orderStateColor() {
      if (this.myReservationObj.state === PENDING_SUBMISSION) {
        return '#ED6324'
      } else if (this.myReservationObj.state === SUBMITTED) {
        return '#978EFE'
      } else if (this.myReservationObj.state === SUCCESSFUL_APPOINTMENT) {
        return '#027AFF'
      } else if (this.myReservationObj.state === CANCEL) {
        return '#999999'
      } else if (this.myReservationObj.state === ACCEPTED) {
        return '#FDB400'
      }
    }
  },
  methods: {
    goToFormDetail(orderNo) {
      this.$AppRouterUtils.open('reservationFormDetail.html?_tv=false&ORDER_NO=' + orderNo)
    }
  },
  filters: {
    // 时间戳转换为日期
    timeConversion(timestamp) {
      let date = dateFtt('yyyy年MM月dd日 hh:mm', new Date(timestamp))// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return date
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.reservation-item-warpper {
  width: 686px;
  min-height: 377px;
  margin-bottom: 32px;
  background-color: #fff;
  border-radius: 8px;
}
.status-bar {
  height: 111px;
  margin: 0 32px;
}
.status-bar > div {
  font-size: 36px;
  font-weight: bold;
}
.dividing-line {
  height: 1px;
  border-bottom: 1px solid #eeeeee; /* no*/
}
.public-style {
  min-height: 86px;
  margin: 0 32px;
  color: #666666;
  word-break: break-all;
  padding: 22px 0;
  box-sizing: border-box;
}
.public-style > div {
  margin-right: 76px;
  white-space: nowrap;
}
</style>
